<template>
  <t-card :bordered="false">
    <div class="form-step-container">
      <!-- 简单步骤条 -->
      <t-card :bordered="false">
        <t-steps :defaultCurrent="1" :current="activeForm" status="process">
          <t-step-item title="场景名称" content="场景名称"></t-step-item>
          <t-step-item title="请求配置" content="请求配置"></t-step-item>
          <t-step-item title="压力配置" content="压力配置"></t-step-item>
          <!-- <t-step-item title="自定义参数" content="其他自定义参数"></t-step-item> -->
          <t-step-item title="完成" content=""></t-step-item>
        </t-steps>
      </t-card>

      <!-- 分步表单1 -->
      <t-form
        v-show="activeForm === 0"
        class="step-form"
        :data="sceneData"
        :rules="rules"
        labelAlign="right"
        @submit="onSubmit1"
      >
        <t-form-item label="场景名称" name="name">
          <t-input :style="{ width: '480px' }" v-model="sceneData.name" placeholder="请输入场景名称"></t-input>
        </t-form-item>

        <t-form-item>
          <t-button theme="primary" type="submit">下一步</t-button>
        </t-form-item>
      </t-form>
      <!-- 分步表单2 -->
      <t-form
        v-show="activeForm === 1"
        class="step-form"
        :data="requestData"
        :rules="rules"
        labelAlign="right"
        @reset="onReset1"
        @submit="onSubmit2"
      >
        <t-form-item label="客户端类型" name="client_type">
          <t-select :style="{ width: '390px' }" v-model="requestData.client_type" class="demo-select-base" clearable>
            <t-option v-for="(item, index) in client_type_Options" :value="item.value" :label="item.label" :key="index">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="合约类型" name="contract_type">
          <t-select :style="{ width: '390px' }" v-model="requestData.contract_type" class="demo-select-base" clearable>
            <t-option v-for="(item, index) in contract_type_Options" :value="item.value" :label="item.label" :key="index">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="合约名" name="contract_name">
          <t-select :style="{ width: '390px' }" v-model="requestData.contract_name" class="demo-select-base" clearable>
            <t-option v-for="(item, index) in contract_name_Options" :value="item.value" :label="item.label" :key="index">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="方法名" name="method_name">
          <t-select :style="{ width: '390px' }" v-model="requestData.method_name" class="demo-select-base" clearable>
            <t-option v-for="(item, index) in method_name_Options" :value="item.value" :label="item.label" :key="index">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="参数大小" name="param_size">
          <t-select :style="{ width: '390px' }" v-model="requestData.param_size" class="demo-select-base" clearable>
            <t-option v-for="(item, index) in param_size_Options" :value="item.value" :label="item.label" :key="index">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>

        <t-form-item>
          <t-button type="reset" theme="default" variant="base">上一步</t-button>
          <t-button theme="primary" type="submit">下一步</t-button>
        </t-form-item>
      </t-form>

      <!-- 分步表单2 -->
      <t-form
        v-show="activeForm === 2"
        class="step-form"
        :data="sceneData2"
        :rules="rules"
        labelAlign="right"
        @reset="onReset2"
        @submit="onSubmit3"
      >
        <t-form-item label="并发数" name="thread_num">
          <t-input
            :style="{ width: '280px' }"
            v-model="sceneData2.thread_num"
            placeholder="请输入每秒的并发请求数"
          ></t-input>
          <span>/s</span>
        </t-form-item>
        <t-form-item label="持续时间" name="run_time">
          <t-input :style="{ width: '280px' }" v-model="sceneData2.run_time" placeholder="压力持续时长(单位豪秒)"></t-input>
          <span>ms</span>
        </t-form-item>
        
        <t-form-item>
          <t-button type="reset" theme="default" variant="base">上一步</t-button>
          <t-button theme="primary" type="submit">下一步</t-button>
        </t-form-item>
      </t-form>

      

      <!-- 分步表单4 -->
      <div class="step-form-4" v-show="activeForm === 3">
        <check-circle-filled-icon style="color: green" size="52px" />
        <!-- <p class="text">配置完成 开始构建</p>
        <p class="tips">生成指定配置的链，分发到各个节点服务器并启动</p> -->
        <div class="button-group">
          <t-space size="100px">
            <t-button @click="activeForm = 2" theme="default" variant="base">上一步</t-button>

            <t-button @click="saveForm" theme="primary">保存场景</t-button>
            <!-- <t-button @click="onReset4" theme="primary">应用到链</t-button> -->
            <!-- <t-button @click="onSubmit4" variant="base" theme="default">查看进度</t-button> -->
          </t-space>
        </div>
      </div>
    </div>
  </t-card>
</template>
<script>
import { CheckCircleFilledIcon } from 'tdesign-icons-vue';
import { prefix } from '@/config/global';
import { createSceneConfig } from '@/api/requestApi';

const INITIAL_DATA1 = {
  name: '',
};
const INITIAL_DATA2 = {
  client_type: 0,
  contract_type: 0,
  contract_name: "T",
  method_name: "P",
  param_size: '200byte',
};
const INITIAL_DATA3 = {
  thread_num: 5000,
  run_time: 600,
};

export default {
  name: 'FormStep',
  components: {
    CheckCircleFilledIcon,
  },
  data() {
    return {
      visible: false,
      checked: true,
      prefix,
      sceneData: { ...INITIAL_DATA1},
      requestData: { ...INITIAL_DATA2 },
      sceneData2: { ...INITIAL_DATA3 },
      formData3: { list: [{ ...INITIAL_DATA3 }] },
      client_type_Options: [
        { label: 'cmc', value: 0 },
        { label: 'go-sdk', value: 1 },
        { label: 'java-sdk', value: 2 },
      ],
      contract_type_Options: [
        { label: '系统合约', value: 0 },
        { label: '用户合约', value: 1 },
      ],
      contract_name_Options: [
        { label: 'T', value: 'T' },
        { label: 'docker-cut', value: 'docker_cut' },
        { label: 'docker-fact', value: 'fact' },
        { label: 'docker-evidence', value: 'evidence' },

      ],
      method_name_Options: [
        { label: 'P', value: 'P' },
        { label: 'save', value: 'save' },
        { label: 'fact', value: 'fact' },
      ],
      param_size_Options: [
        { label: '200byte', value: '200byte' },
        // { label: '500byte', value: '500byte' },
        { label: '5k', value: '5k' },
        { label: '500k', value: '500k' },
      ],
      
      rules: {
        name: [{ required: true, message: '请输入场景名称', type: 'error' }],
        client_type: [{ required: true, message: '请选择客户端类型', type: 'error' }],
        contract_type: [{ required: true, message: '请选择合约类型', type: 'error' }],
        contract_name: [{ required: true, message: '请选择合约名', type: 'error' }],
        method_name: [{ required: true, message: '请选择方法名', type: 'error' }],
        param_size: [{ required: true, message: '请选择参数大小', type: 'error' }],
        thread_num: [{ required: true, message: '请输入并发数', type: 'error' }],
        run_time: [{ required: true, message: '请输入运行时长', type: 'error' }],
      },
      activeForm: 0,
    };
  },
  computed: {
    amount() {
      if (this.requestData.name === '1') {
        return '565421';
      }
      if (this.requestData.name === '2') {
        return '278821';
      }
      if (this.requestData.name === '3') {
        return '109824';
      }
      return '--';
    },
  },
  methods: {
    onSubmit1({ validateResult }) {
      if (validateResult === true) {
        this.activeForm = 1;
      }
    },
    onSubmit2({ validateResult }) {
      if (validateResult === true) {
        this.activeForm = 2;
      }
    },
    onSubmit3({ validateResult }) {
      if (validateResult === true) {
        this.activeForm = 3;
      }
    },
    onReset1() {
      this.activeForm = 0;
    },
    onReset2() {
      this.activeForm = 1;
    },
    onReset3() {
      this.activeForm = 2;
    },
    onSubmit4() {
      this.$router.replace({ path: '/detail/advanced' });
    },
    // onReset4() {
    //   this.activeForm = 0;
    // },
    onChange(val) {
      console.log(val);
    },
    onAddFormItem() {
      console.log(this.formData3);
      this.formData3.list.push({ ...INITIAL_DATA3 });
    },
    onDelFormItem(index) {
      this.formData3.list.splice(index, 1);
    },
    // 保存配置
    saveForm() {
      const params = {
        request_config: {
          request_name: this.sceneData.name,
          client_type: this.requestData.client_type,
          contract_type: this.requestData.contract_type,
          contract_name: this.requestData.contract_name,
          contract_method: this.requestData.method_name,
          param_size: this.requestData.param_size,
        },
        scene_config: {
          scene_name: this.sceneData.name,
          threads: this.sceneData2.thread_num,
          runtime: this.sceneData2.run_time,
        },
        
      };
      console.log("@@@@@@@@@@@@@@");
      console.log(params);

      console.log("发送请求前");
      this.$request
        .post(createSceneConfig(), params)
        .then((res) => {
          console.log("请求成功");
          console.log(res)
          console.log(res.data)
          console.log(res.status)
          if (res.status === 200) {
            this.$message.success('场景保存成功');
            this.$router.push('/scene/list');
          } else {
            this.$message.fail(res.data);
          }
        })
        .catch((e) => {
          console.log("请求失败", e);
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import '../index';
</style>
